<template>
    <div>
        <div>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/home' }" class="el-icon-s-fold">首页</el-breadcrumb-item>
                <el-breadcrumb-item>借款管理</el-breadcrumb-item>
                <el-breadcrumb-item>借款人详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--主体内容-->
        <div>
            <el-descriptions class="margin-top" title="详细信息" :column="3" :size="size" border>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user"></i>
                        姓名
                    </template>
                    {{UserMessage.umName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mobile-phone"></i>
                        手机号
                    </template>
                    {{UserMessage.uMobile}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-location-outline"></i>
                        详细地址
                    </template>
                    {{UserMessage.umAddress}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-timer"></i>
                        创建时间
                    </template>
                    {{UserMessage.umInsertTime}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-bank-card"></i>
                        身份证
                    </template>
                    {{UserMessage.umIdcard}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-mouse"></i>
                        职业类型
                    </template>
                    {{UserMessage.professionType.ptName}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-user-solid"></i>
                        紧急联系人姓名
                    </template>
                    {{UserMessage.umImportantPersonName}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-phone"></i>
                        紧急联系人手机号
                    </template>
                    {{UserMessage.umImportantPersonPhone}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-ship"></i>
                        关系
                    </template>
                    {{UserMessage.umRelation}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-aim"></i>
                        婚姻状况
                    </template>
                    {{UserMessage.umIsmarried==1?"已婚":"未婚"}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-sunny"></i>
                        日利率
                    </template>
                    {{UserMessage.umDateRate}}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-timer"></i>
                        年利率
                    </template>
                    {{UserMessage.umYearRate}}
                </el-descriptions-item>

                <el-descriptions-item>
                    <template slot="label">
                        <i class="el-icon-wallet"></i>
                        月收入
                    </template>
                    <el-select  v-model="UserMessage.umSalary">
                        <el-option
                                :label="item.text"
                                :value="item.id"
                                :key="item.id"
                                v-for="item in userSalary"
                        ></el-option>
                    </el-select>
                </el-descriptions-item>
            </el-descriptions>
        </div>

            <div class="demo-image__placeholder">
                <div class="block">
                    <span class="demonstration">身份证正面</span>
                    <el-image :src="UserMessage.umIdcardFacade"></el-image>
                </div>
                <div class="block">
                    <span class="demonstration">身份证反面</span>
                    <el-image :src="UserMessage.umIdcardNegative"></el-image>
                </div>
            </div>
        <div>
            <el-descriptions :column="2">
                <el-descriptions-item label="是否通过">
                <template>
                    <el-radio-group v-model="UserMessage.umIspass">
                        <el-radio :label="1">审批中</el-radio>
                        <el-radio :label="2">通过</el-radio>
                        <el-radio :label="0">不通过</el-radio>
                    </el-radio-group>
                </template>
                </el-descriptions-item>
                <el-descriptions-item label="操作">
                    <template>
                        <el-button @click="goback()" type="primary" size="small">退出当前操作</el-button>
                        <el-button @click="userisOK()" type="primary" size="small">提交审核</el-button>
                    </template>
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script>
    export default {
        name: "LoadUserMessage",
        data(){
            return{
                //接收id查询单条数据
                size:'',
                umId:this.$route.params.umId,
                //用来回显
                UserMessage:{
                    umIspass:'0',//认证状态 默认为0
                    umInsertTime:'',//合同创建时间
                    umName:'',//用户姓名
                    uMobile:'',//手机号码
                    umIsmarried:'',//婚姻状况，1已婚，0未婚
                    professionType:{},//职业类型
                    umProfessionTypeId:'',//职业类型id
                    umSalary:'',//月收入0-4
                    umIdcard:'',//身份证
                    umImportantPersonName:'',//紧急联系人姓名
                    umImportantPersonPhone:'',//紧急联系人手机号
                    umRelation:'',//与联系人的关系
                    umIdcardFacade:'',//身份证正面图片地址
                    umIdcardNegative:'',//身份证反面图片地址
                    umDateRate:'',//日利率
                    umYearRate:'',//年利率
                    umAddress:'',//省市区+详细地址
                },
                userSalary:[
                    {id:1,text:"5-10k"},
                    {id:2,text:"10-20k"},
                    {id:3,text:"20-40k"},
                    {id:4,text:"40k-100k"},
                    {id:5,text:"200k以上"}
                    ]

            }
        },
        methods:{
            goback(){//退出
                location.href="/user"
            },
            userisOK(){
                let url =this.$baseUrl+"userManager/userisOK"
                if(this.UserMessage.umIspass==1){
                    this.$alert("请进行审核!")
                }else{
                    this.$axios.put(url,{
                        umId:this.umId,
                        umIspass:this.UserMessage.umIspass
                    }).then(res=>{
                        if (res.data.code == 200){
                            this.$alert(res.data.msg)
                            this.goback()//返回/user
                        }else {
                            this.$alert(res.data.msg)
                        }
                    })
                }
            }
        },
        created(){
            let url=this.$baseUrl+"userManager/showOneUserManager/"+this.umId;
            this.$axios.get(url).then(res=>{
                this.UserMessage=res.data.data
            })
        }
    }
</script>

<style scoped>

</style>